<!DOCTYPE html>
<html>
<head>
  <title>vue 代码生成器</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script>
    window.isInElectron = false
    if (typeof globalThis !== 'undefined' && globalThis.preloadInit) {
      globalThis.preloadInit()
      window.isInElectron = true
    }
  </script>
  <link rel="stylesheet" href="public/pc/v2/css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script src="public/pc/v2/js/jquery.min.js"></script>
  <script type="text/javascript" src="public/pc/v2/js/jquery.ztree.core.js"></script>
  <script type="text/javascript" src="public/pc/v2/js/jquery.ztree.exedit.js"></script>
  <script src="public/pc/v2/js/vue.min.js"></script>

  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css" rel="stylesheet">
  <script src="public/pc/v2/element-ui/index.js" async></script>

  <script src="https://cdn.bootcss.com/ace/1.4.9/ace.min.js"></script>
  <script src="https://cdn.bootcss.com/ace/1.4.9/mode-javascript.js"></script>
  <script src="https://cdn.bootcss.com/ace/1.4.9/mode-html.js"></script>
  <script src="https://cdn.bootcss.com/ace/1.4.9/mode-markdown.js"></script>
  <script src="https://cdn.bootcss.com/ace/1.4.9/mode-scss.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify.js" async></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-css.min.js" async></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.min.js" async></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

  <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>

  <link href="public/pc/index/index.css" rel="stylesheet">
  <script src="public/pc/v2/js/template.js"></script>
  <script>
    // console.log('window template', window.template)
    window.ART = window.template
  </script>
</head>

<style>
  .ztree li span.button.switch {
    background-image: url("public/pc/v2/left_menuForOutLook.png");
  }
</style>

<body class="test-tree">

<style id="startapp-style-tpl">
.startapp_preview_code {
  width: 30vw;
  height: 70vh;
}
</style>


<div id="appStartModal" style="position: fixed; left: 0; top: 0; width: 100vw;
  height: 100vh; background-color: rgba(255, 255, 255, .9); z-index:10;
  display: block;">
<!--  <button onclick="appStartModal.style.display = 'none'">close</button>-->
  <div id="startapp"></div>
</div>

<div id="appCodeModal" style="position: fixed; left: 10vw; top: 10vh; width: 80vw;
  height: 80vh; background-color: rgba(255, 255, 255, .9); z-index:10;
  display: none;">
  <button onclick="appCodeModal.style.display = 'none'">close</button>
  <div>
    <button id="appCodeCopy">copy html</button>
  </div>
  <div id="codeeditor" style="height: 70vh"></div>
</div>

<div id="appTestComponentsModal" style="position: fixed; left: 5vw; top: 5vh; width: 90vw;
  height: 90vh; background-color: rgba(255, 255, 255, .9); z-index:10;
  display: none;">
  <button onclick="appTestComponentsModal.style.display = 'none'">close</button>
  <div id="comapp"></div>
</div>


<div id="appLoading" style="position: fixed; left: 0; top: 0; width: 100%;
  height: 100%; background-color: rgba(0,0,0,.3); z-index:1000">loading
</div>

<template id="propapp-com-tpl">
  <div class="propapp-com">
    {% verbatim %}
    <div class="prop-dl">
      <div class="prop-dh">样式修改 (sstyle)</div>
      <div  class="prop-sstyle-desitem" v-for="(desitemItem, desitemItemKey) in desitem">
        <div  class="prop-sstyle-desitem-h">{{desitemItemKey}}</div>
        <template v-if="desitemItem.type === 'style'">
          <style-input :value="desitemItem.value"
                       @input="onStyleInput($event, desitemItem, desitemItemKey)"></style-input>
        </template>
      </div>
    </div>
    <div class="prop-dl">
      <div class="prop-dh">属性修改 (attts)</div>
      <field-object
          ref="object"
          neededit="neededit"
          :comname="comname"
          :schema="schema"
          :model="model.myObject"
          @delete="onAttributeDelete"
          @propinput="onAttributeInput">
      </field-object>
    </div>
    <div style="overflow: auto">
      <pre v-if="model" v-html="prettyJSON(model.myObject)"></pre>
    </div>
<!--    <field-object-->
<!--        ref="object"-->
<!--        :comname="comname"-->
<!--        :schema="schema"-->
<!--        :model="model.myProp"-->
<!--        @delete="onPropDelete"-->
<!--        @propinput="onPropInput">-->
<!--    </field-object>-->
<!--    <div style="overflow: auto">-->
<!--      <pre v-if="model" v-html="prettyJSON(model.myProp)"></pre>-->
<!--    </div>-->
  </div>
  {% endverbatim %}
</template>

<template id="propapp-tpl">
  <div class="vma-app" :class="getAppClass()">
    <propapp-com ref="com" v-if="showCom"></propapp-com>
  </div>
</template>

<template id="pageapp-tpl">
  <div class="vma-app" :class="getAppClass()">
    <pageapp-com ref="com" v-if="showCom"></pageapp-com>
  </div>
</template>

<my-control-webview id="controlWebview" for="testWebview"></my-control-webview>
<div class="ui-flex ui-full-h contentWrap">
  <div class="ui-relative left" id="elementApp">
    <ul class="ui-list-reset ui-mt0 ui-mb2 components">
<!--      <li>-->
<!--        <h3>templates</h3>-->
<!--        {% verbatim %}-->
<!--        <div class="domBtnDiv">-->
<!--          <div id="dom_1" class="ui-flex com-category-wrap">-->
<!--            <template v-for="(item, key) in templates">-->
<!--              <span class="domBtnStyle" v-bind="item.attrs"-->
<!--                    @click="run(item)"-->
<!--              >{{key}}</span>-->
<!--            </template>-->
<!--          </div>-->
<!--          <div class="dom-line"></div>-->
<!--        </div>-->
<!--        {% endverbatim %}-->
<!--      </li>-->
      <li>
        <h3>elements</h3>
        {% verbatim %}
        <div class="domBtnDiv">
          <div id="dom_2" class="ui-flex com-category-wrap">
            <template v-for="item in elements">
              <span class="domBtnDrag" v-bind="item.attrs">{{item.textContent}}</span>
            </template>
          </div>
          <div class="dom-line"></div>
        </div>
        {% endverbatim %}
      </li>
      <li hidden>
        <h3>blocks</h3>
        {% verbatim %}
        <div class="domBtnDiv">
          <div id="dom_3" class="ui-flex com-category-wrap">
            <div class="domBtnDrag"
                 v-for="item in blocks"
                 :data-block-nodes="item">{{item}}
            </div>
          </div>
        </div>
        {% endverbatim %}
      </li>
    </ul>
  </div>
  <div class="center" style="width: 0">
    <div
        class="ui-flex ui-flex-column ui-items-center ui-justify-center"
        style="width: 100%;">
      <webview id="testWebview"
               style="width: 375px; height: 0;"
               disablewebsecurity></webview>

    </div>
  </div>
  <div class="right">
    <div class="ui-flex" style="height: 100%">
      <div>
        <ul id="treeDemo" class="ztree"></ul>
        <div class="propWrap"  style="width: var(--ztree-width);">
          <div id="propapp"></div>
        </div>
      </div>
      <div class="pageapp-wrap">
        <div id="pageapp"></div>
      </div>
    </div>
  </div>
</div>
<script>
  {
    let vvg = {}
    vvg.page = {
      html: '',
      css: '',
      js: '',
      tpl: '',
      ext: {},
      des: {}
    }
    vvg.toggleLoading = function (isShow) {
      document.getElementById('appLoading').style.display = isShow ? 'block' : 'none'
    }
    vvg.init = function () {
      vvg.toggleLoading(false)
    }
    vvg.blocks = {}
    vvg.tpl = ''
    vvg.serverPath = `{{ baseDir | safe }}`
    vvg.getSuggestions = function(comType) {
      let obj = {
        'img': [
          'src',
          'alt'
        ]
      }
      return new Promise((resolve) => {
        if (obj[comType]) {
          resolve(obj[comType])
        } else {
          resolve([])
        }
      })
    }
    vvg.onDom2treeUpdate = function() {
      window.MoveTest.updateType()
    }
    window.vvg = vvg
  }
</script>
{% for item in blocksScripts %}
<script src="{{ item }}"></script>
{% endfor %}
<!--{% for item in eleScripts %}-->
<!--<script src="{{ item }}"></script>-->
<!--{% endfor %}-->
<script>
  window.vvg.templates = {}
  window.tplScripts = '{{tplScripts}}'.split(',')
  window.reloadTemplates = function () {
    tplScripts.forEach(function (tpl) {
      window.vvg.templates[tpl] = {
        attrs: {},
        getTpl(serverPath) {
          let {fileStr, path} = globalThis.requireFile(serverPath, '/browser/' + tpl)
          return `
<!-- ${path} -->
${fileStr}
`.trim()
        },
      }
    })
  }
    window.reloadTemplates()
</script>

<script src="public/pc/index/index.js?v=1"></script>
<script>
  window.vvg.eleScripts = '{{eleScripts}}'.split(',')

    vvg.loadJs = (function () {
    function load (src, opts, cb) {
      var head = document.head || document.getElementsByTagName('head')[0]
      var script = document.createElement('script')

      if (typeof opts === 'function') {
        cb = opts
        opts = {}
      }

      opts = opts || {}
      cb = cb || function() {}

      script.type = opts.type || 'text/javascript'
      script.charset = opts.charset || 'utf8';
      script.async = 'async' in opts ? !!opts.async : true
      script.src = src

      if (opts.attrs) {
        setAttributes(script, opts.attrs)
      }

      if (opts.text) {
        script.text = '' + opts.text
      }

      var onend = 'onload' in script ? stdOnEnd : ieOnEnd
      onend(script, cb)

      // some good legacy browsers (firefox) fail the 'in' detection above
      // so as a fallback we always set onload
      // old IE will ignore this and new IE will set onload
      if (!script.onload) {
        stdOnEnd(script, cb);
      }

      head.appendChild(script)
    }

    function setAttributes(script, attrs) {
      for (var attr in attrs) {
        script.setAttribute(attr, attrs[attr]);
      }
    }

    function stdOnEnd (script, cb) {
      script.onload = function () {
        this.onerror = this.onload = null
        cb(null, script)
      }
      script.onerror = function () {
        // this.onload = null here is necessary
        // because even IE9 works not like others
        this.onerror = this.onload = null
        cb(new Error('Failed to load ' + this.src), script)
      }
    }

    function ieOnEnd (script, cb) {
      script.onreadystatechange = function () {
        if (this.readyState != 'complete' && this.readyState != 'loaded') return
        this.onreadystatechange = null
        cb(null, script) // there is no way to catch loading errors in IE8
      }
    }

    return load
  })()

  window.vvg.reloadScripts = function (src) {
    return new Promise(function (resolve) {
      let script = document.head.querySelector(`[src='${src}']`)
      if (script) {
        document.head.removeChild(script)
      }
      vvg.loadJs(src + '?now=' + Date.now(), function (err, script) {
        if (err) {
          // print useful message
        }
        else {
          // window.vvg.elementApp.elements = {}
          // window.vvg.elementApp.elements = window.vvg.elements

          window.vvg.elementAppSetElements(window.vvg.elements)
          resolve()
        }
      })
    })
  }

  window.vvg.reloadScripts(vvg.eleScripts[0]).then(() => {
    for (let i = 1; i < vvg.eleScripts.length; i++) {
      vvg.reloadScripts(vvg.eleScripts[i])
    }
  })
</script>
</body>

</HTML>
